<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>权记照相馆名册生成器</title>
		<style>
			.colInput{
				width: 500px;
				height: 40px;
				vertical-align: middle;
				margin-bottom: 10px;
			}
			input[type=text]{
				width: 80px;
				padding: 5px;
				font-size: 15px;
				margin: 0 5px 0 5px;
			}
			input[type=button]{
				width: 80px;
				height: 30px;
				cursor: pointer;
			}
			textarea{
				font-size: 14px;
				padding: 10px;
			}
			li{
				list-style: none;
			}
			#application{
				padding-left: 30px;
			}
		</style>
	</head>
	<body>
		<div id="inputArea">
			<!--列模板-->
		</div>
		<div id="application">
			<p><input type="button" value="新增一列" id="addColBtn" /></p>
			<p><span>行的间隔:</span><input type="text" id="colInterval" /><span>(28=1厘米)</span></p>
			<p><span>字体大小:</span><input type="text" id="fontSize" /><span>(28=1厘米)</span></p>
			<p><span>字体粗细:</span><input type="text" id="fontWeight" /><span>100-900(数值越大字体越粗)</span></p>
			<p><span>名字间隔:</span><input type="text" id="nameInterval" /><span>(28=1厘米)</span></p>
			<p><span>整体离上边距离:</span><input type="text" id="mainTop" /><span>(28=1厘米)</span></p>
			<p><input type="button" value="生成" id="outputBtn" /></p>
		</div>
		
		<!--多个模板-->
		<script type="text/template" id="moreColTpl">
			<ul>
		<%for(var i=0;i<result.length;i++){
			var item = result[i];
			var namelistStr1 = item.namelist.toString();
			var namelistStr = namelistStr1.replace(/,/g , "，");  %>
			<li class="colList">
				<span>第<%= i+1 %>列:</span>
				<textarea class="colInput" id=<%= "colInput"+i %> placeholder="以中文逗号把名字隔开" ><%= namelistStr %></textarea>
				<span>此行离左边距离:</span>
				<input type="text" class="colLeftMove" id=<%= "colLeftMove"+i %> value=<%= item.moveLeft %> />
				<span>(28=1厘米)</span>
				<input type="button" value="删除" class="deleBtn" />
				<input type="button" value="反向" class="toggleDirection" />
			</li>
		<%}%>
		</ul>
  		</script>
  		
  		<!--单个模板-->
		<script type="text/template" id="singleColTpl">
			<li class="colList">
				<span>第<%= item+1 %>列:</span>
				<textarea class="colInput" id=<%= "colInput"+item %> placeholder="以中文逗号把名字隔开" ></textarea>
				<span>此行离左边距离:</span>
				<input type="text" value="60" class="colLeftMove" id=<%= "colLeftMove"+item %> />
				<span>(28=1厘米)</span>
				<input type="button" value="删除" class="deleBtn" />
				<input type="button" value="反向" class="toggleDirection" />
			</li>
  		</script>
  		
	</body>
	<script type="text/javascript" src="js/underscore-min.js" ></script>
	<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="js/photoInput.js"></script>
</html>

